<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备详情——交互记录</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        html,body {
            font-family: 'Microsoft YaHei';
            font-size: 14px;
            line-height:1;
            color: #666;
            width: 100%;
            height:100%;
            position: relative;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        a {
            text-decoration: none;
            color: #666;
        }
        .orange {
            color: #f3af33;
        }
        .clear {
            clear: both;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        /* 面包屑 */
        .top {
            border-bottom: 2px solid #f3af33;
            margin: 9px 13px 0 13px;
            box-sizing: border-box;
            overflow: hidden;
        }
        .top .top-title {
            font-size: 18px;
            font-weight: bold;
            color: #f3af33;
            margin-bottom: 9px;
        }
        .top ul.top-list {
            margin-top: 6px;
        }
        .top ul.top-list li{
            float: left;
        }
        .top ul.top-list li a {
            color: #666;
            font-size: 14px;
            border-right: 1px solid #989898;
            display: block;
            padding: 0 14px;
        }
        .top ul.top-list li.active a {
            color: #f3af33;
        }
        .top ul.top-list li:last-child a {
            border-right: 0;
            padding-right: 0;
        }

        /* 操作栏（删除）*/
        .handle-box {
            width: 100%;
            border: 1px solid #e8e8e8;
            background: #f5f5f5;
            height: 41px;
            overflow: hidden;
        }
        .handle-box-left ul {
            overflow: hidden;
            box-sizing: border-box;
        }
        .handle-box-left li{
            float: left;
            width: 108px;
            box-sizing: border-box;
            padding-left: 31px;
            line-height: 39px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
        }
        .handle-box-left li.active {
            color: #f3af33;
        }
        .handle-box-left li .handle-icon {
            display: inline-block;
            height: 19px;
            vertical-align: middle;
            line-height: 39px;
            width: 18px;
            margin-top: -3px;
            background: url(image/icon.png) no-repeat;
        }
        .handle-box-left li.active.del-btn .handle-icon {
            background-position: -41px 0;
        }
        .handle-box-left li.del-btn .handle-icon {
            background-position: -41px -20px;
        }

        /*  分页器  */
        .paging-bg {
            position: absolute;
            bottom: 16px;
            width: 1200px;
            background: #fff;
        }
        .paging-bg .page-msg ul {
            overflow: hidden;
        }
        .paging-bg .page-msg li {
            float: left;
            margin-right: 1em;
            font-size: 12px;
        }
        .filter-box {
            margin: 20px 0 15px;
            padding: 0 12px;
        }
        .filter-top {
            padding:0 0 20px 10px;
            border-bottom: 1px dotted #eee;
        }
        .filter-top-list li {
            margin-right: 20px;
            position: relative;
        }
        .filter-top ul li input,.divselect .selectInput{
            border: 1px solid #e8e8e8;
            border-radius: 14px;
            padding: 0 10px;
            box-sizing: border-box;
            height: 30px;
            line-height: 28px;
            font-size: 14px;
            color: #666;
            background-color: #fff;
            cursor: pointer;
            font-family: "Microsoft YaHei";
        }
        .filter-top ul li input {
            width: 170px;
        }
        .filter-top ul li.dataTime {
            margin-right: 0;
        }
        .filter-top ul li.dataTime input {
            width: 150px;
        }
        .divselect .selectInput {
            width: 120px;
            text-align: center;
            background: url("image/arr_down.png") no-repeat 100px center;
            cursor: pointer;
        }
        .divselect .selectInput.width200 {
            width: 200px;
            background-position-x: 180px;
        }
        .selectSub {
            width: 120px;
            position: absolute;
            top: 40px;
            border: 1px solid #e5ebed;
            padding: 6px 0;
            border-radius: 14px;
            background: #fff;
            display: none;
            z-index: 100;
            max-height:132px;
            box-sizing: border-box;
            overflow-y: scroll;
        }
        .selectSub.width200 {
            width: 200px;
        }
        .selectSub li {
            text-align: center;
            line-height: 30px;
            width: 100%;
            color: #333;
            cursor: pointer;
        }
        .selectSub li.active {
            background: #e6e6e6;
        }

        span.fenge {
            line-height: 30px;
            margin: 0 10px;
        }
        .seachBtn {
            margin-left: 20px;
        }
        .seachBtn a {
            display: block;
            width: 130px;
            height: 30px;
            background: #f3af33;
            border-radius: 14px;
            line-height: 30px;
            text-align: center;
            color: #fff;;
            cursor: pointer;
        }
        .seachBtn a:active {
            background: #e1a22e;
        }

        /* 表格 */
        .table-box {
            margin-top: 20px;
            padding-bottom: 70px;
        }
        .table {
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            /*border-bottom: 0;*/
        }
        .table-header,.table-body {
            overflow: hidden;
            text-align: center;
        }
        .table-header {
            font-weight: bold;
            color: #596679;
            height: 46px;
            line-height: 45px;
            background: #f6f6f6;
        }
        .table-td {
            float: left;
            border-right:1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e8;
            box-sizing: border-box;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 100%;
            /*word-break: break-all;*/
        }
        .table-td.width478{
            word-break: break-all;
            white-space: normal;
            padding: 0 10px;
        }
        .width50 {
            width: 50px;
        }
        .width120 {
            width: 120px;
        }
        .width160 {
            width: 160px;
        }
        .width268 {
            width:270px;
        }
        .width478 {
            width: 478px;
        }
        .table-body li {
            height: auto;
            /*line-height: 49px;*/
            box-sizing: border-box;
            overflow: hidden;
        }
        ul.table-body li:nth-child(odd){
            background: #fff;
        }
        ul.table-body li:nth-child(even){
            background: #f6f6f6;
        }
        .table-body li:last-child .table-td {
            border-bottom: 0;
        }
        .table .table-td:last-child {
            border-right: 0;
        }
        .table-body .table-td.width478 {
            line-height: 28px;
        }

        /* 弹框 */
        .bomb-boxs {
            background: rgba(0,0,0,0.5);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
        .bomb {
            border-radius: 4px;
            /*position: relative;*/
            position: absolute;
            left: 50%;
            top: 50%;
            box-sizing: border-box;
            background: #fff;
        }
        .close-btn {
            width: 20px;
            height:25px;
            text-align: center;
            line-height: 20px;
            background: #f3af33;
            border-radius: 0 0 20px 20px;
            position: absolute;
            top:0;
            right: 15px;
            cursor: pointer;
        }
        .close-btn:active {
            background: #e1a22e;
        }
        .close-btn .close-icon {
            width:14px;
            height:14px;
            display: inline-block;
            margin-top: 4px;
            background: url(image/icon.png) no-repeat -138px 0;
        }

        /* 提示弹框 */
        .tipsbomb {
            width: 430px;
            height:230px;
            margin-top: -115px;
            margin-left: -215px;
            background: #fff;
            text-align: center;
        }
        .tips-icon {
            height: 50px;
            margin: 42px 0 22px 0;
        }
        .tips-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        .tips-button {
            font-weight: bold;
            color: #fff;
            background: #f3af33;
            height: 46px;
            line-height: 46px;
            border-radius: 0 0 4px 4px;
            position: absolute;
            bottom: 0;
            left:0;
            width:100%;
            cursor: pointer;
        }
        .tips-button:active {
            background: #e1a22e;
        }

        .tipbomb_black {
            width: 200px;
            height: 88px;
            line-height: 88px;
            text-align: center;
            background: rgba(0,0,0,0.4);
            color: #fff;
            border-radius: 4px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -44px;
            margin-left: -100px;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 面包屑 -->
        <div class="top">
            <div class="top-title fl">
                <div>设备详情</div>
            </div>
            <ul class="top-list fr">
                <li><a href="#">运行参数</a></li>
                <li><a href="#">更多参数</a></li>
                <li class="active"><a href="interactiveRecording_deviceDetail.html?dtu_id=RK00000000">交互记录</a></li>
                <li><a href="#">分析报表</a></li>
            </ul>
        </div>

        <!-- 筛选查询 -->
        <div class="filter-box">
            <div class="filter-top">
                <ul class="filter-top-list">
                    <li class="fl divselect modelSelect">
                        <div class="selectInput modelInput">模式</div>
                        <div class="selectSub modelSub">
                            <ul>
                                <li class="active" id="modelmoren">模式</li>
                            </ul>
                        </div>
                    </li>

                    <li class="fl divselect commondSelect">
                        <div class="selectInput width200 commondInput">命令类型</div>
                        <div class="selectSub width200 commondSub">
                            <ul>
                                <li class="active" id="commondmoren">命令类型</li>
                            </ul>
                        </div>
                    </li>
                    <li class="fl dataTime">
                        <input class="laydate-icon" value="2017-5-20" onclick="laydate()" id="startTime">
                    </li>
                    <span class="fl fenge">-</span>
                    <li class="fl dataTime">
                        <input class="laydate-icon" value="2017-5-27" onclick="laydate()" id="endTime">
                    </li>
                    <li class="fl seachBtn">
                        <a type="button">查询</a>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
        </div>

        <!-- 操作栏（删除） -->
        <div class="handle-box">
            <div class="handle-box-left fl">
                <ul>
                    <li class="del-btn">
                        <span class="handle-icon"></span>
                        删除
                    </li>
                </ul>
            </div>

        </div>

        <!-- 交互记录表格 -->
        <div class="table-box">
            <div class="table interactive-table">
                <div class="table-header">
                    <div class="table-td width50">
                        <input type="checkbox" id="chooseAll">
                    </div>
                    <div class="table-td width120">控制器编号</div>
                    <div class="table-td width120">模式</div>
                    <div class="table-td width268">命令类型</div>
                    <div class="table-td width160">时间</div>
                    <div class="table-td width478">内容</div>
                </div>

                <ul class="table-body"></ul>
            </div>
        </div>

        <!-- 分页器 -->
        <div class="paging-bg">
            <div class="fl page-msg">
                <ul>
                    <li>总<span class="allRow orange"></span>条</li>
                    <li>每页<span class="perRow orange"></span>条</li>
                    <li>共<span class="pageNum orange"></span>页</li>
                </ul>
            </div>
            <div class="fr" id="pagination"></div>
        </div>

    </div>

    <!-- 弹框合集 -->
    <div class="bomb-boxs" id="bomb-boxs" style="display: none">
        <!-- 删除弹框 -->
        <div class="bomb tipsbomb delbomb">
            <div class="close-btn fr">
                <a class="close-icon"></a>
            </div>
            <div class="tips-icon">
                <img src="image/trash.png">
            </div>
            <div class="tips-title">
                删除记录
            </div>
            <p class="isConfirm">你是否确认删除这条记录？</p>
            <div class="tips-button">确认</div>
        </div>
    </div>

    <!-- 未勾选/操作成功提示弹框 -->
    <div class="tipbomb_black"></div>

    <script src="js/plugin/jquery.js"></script>
    <script src="js/plugin/laydate-v1.1/laydate/laydate.js"></script>
    <script src="js/plugin/laypage-v1.3/laypage/laypage.js"></script>
    <script>
        // ==========面包屑点击效果==========
        $('.top-list li').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
        });
    </script>
    <script>
        $(function(){
            //编写 获取地址栏参数 的函数
            function GetQueryString(name)
            {
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            }
            var Odtu_id = GetQueryString('dtu_id');

            //动态获取token
            var token='';
            var questParam = {token: token, dtu_id : Odtu_id};
            $.post('http://120.77.83.63:8180/baod/login.shtml',{username:'root',password:'xwl001'},function(data){
//                console.log(data);
                if(data.code == '1'){
                    token = data.data.token;
                    questParam.token = token;
                    console.log(token);
                    findByPage();
                }
            },'json');

            //模式和命令类型下拉框的内容数组
            var modelArry = [{key:'收到',value:'1'},{key:'发送',value:'2'}];
            var commondArry = [
                {key:'终端上线注册',value:'001'},
                {key:'终端上线注册应答',value:'801'},
                {key:'获取终端数据',value:'805'},
                {key:'数据获取应答',value:'005'},
                {key:'设置终端参数',value:'806'},
                {key:'参数设置应答',value:'006'},
                {key:'事件信息上传',value:'007'},
                {key:'事件信息上传应答',value:'807'},
                {key:'变频器操作',value:'811'},
                {key:'变频器应答',value:'011'},
                {key:'终端参数定时上传',value:'012'},
                {key:'终端控制',value:'813'},
                {key:'终端控制应答',value:'013'},
                {key:'远程升级请求推送',value:'850'},
                {key:'远程升级结果上报',value:'060'}
            ];

            var $page_now = $('.page-now');

            var $startTime = $('#startTime');//开始时间下拉框选择器
            var $endTime = $('#endTime');//结束时间下拉框选择器

            var $bombBoxs = $('.bomb-boxs');
            var $delbomb = $('.delbomb');

            var $delBtn = $('.del-btn');
            var $closeBtn = $('.close-btn');

            var $chooseAll = $('#chooseAll');
            var $chooseRow;

            var $tipbomb = $('.tipbomb_black');

            var records = [];
            var data = {};

            //编写交互记录表格函数
            function addtabelRow(records){
                var tableRow = '';
                for(var i=0;i<records.length;i++){
                    tableRow += '<li id="' +records[i].id +'">' +
                        '<div class="table-td width50">' +
                        '<input type="checkbox" name="chooseRow">' +
                        '</div>' +
                        '<div class="table-td width120">'+ records[i].dtu_id +'</div>' +
                        '<div class="table-td width120">'+ records[i].model +'</div>' +
                        '<div class="table-td width268">'+ records[i].command_type +'</div>' +
                        '<div class="table-td width160">'+ records[i].create_date +'</div>' +
                        '<div class="table-td width478">'+ records[i].command_content +'</div>' +
                        '</li>'
                }
                $('.table-body').html(tableRow);
            }

            //编写底部分页器函数
            function pagination(pages){
                laypage({
                    cont: 'pagination',
                    pages: pages,
                    skin: '#f3af33',
                    first: 1,
                    last: pages,
                    prev: '<em><</em>',
                    next: '<em>></em>'
                });
            }

            //编写页数信息函数
            function pageInfo(data){
                //共xx页，每页xx条，共条
                $('.allRow').text(data.data.rowCount);//总条数
                $('.perRow').text(data.data.pageSize);//每页条数
                $('.pageNum').text(data.data.pageCount);//总页数
            }

            //编写全选的函数
            function chooseAll(){
                //========点击全选按钮，让系统管理表格的复选框与全选同步=======
                $chooseAll.click(function () {
                    $chooseRow = $('input[name="chooseRow"]');
                    $chooseRow.prop('checked',$(this).prop('checked'));
                });
            }

            //编写请求页面函数
            function findByPage() {
                questParam.start_date = $startTime.val();
                questParam.end_date = $endTime.val();
                questParam.pageNow = '';

                $.post('http://120.77.83.63:8180/baod/device/operate.shtml',{token:token,id:'606'},function(data){
                    if(data.code == '1'){
                        if(data.data.length<0){
                            $('.del-btn').remove();
                        }
                    }
                },'json');
                console.log(questParam);
                $.post('http://120.77.83.63:8180/baod/commandLog/findByPage.shtml',questParam,function(data){
                    console.log(data);
                    if(data.code == '1'){
                        data = data;
                        records = data.data.records;

                        pageInfo(data);//调用页面信息函数
                        pagination(data.data.pageCount);//调用分页器函数
                        addtabelRow(records);//调用交互记录表格函数
                        chooseAll();//调用全选函数
                        intertbody_td();//调用交互内容高度设定函数
                    }else{
                        alert(data.msg);
                    }
                },'json')
            }

            //编写交互内容高度设定函数（交互记录内容的高度由内容多少撑开）
            function intertbody_td (){
                var $tbodyLi = $('.table-body li');
                var $tbody_width478 = $('.table-body .table-td.width478');
                var interCon_h;
                for(var i=0;i<$tbodyLi.length;i++){
                    interCon_h = $($tbody_width478[i]).height();
//                    console.log(interCon_h);
                    if(interCon_h < 50) {
                        $($tbodyLi[i]).css({'height':'50px','line-height':'50px'});
                        $($tbody_width478[i]).css({'line-height':'50px'});
                    }else {
                        $($tbodyLi[i]).css({'height':interCon_h+'px','line-height':interCon_h+'px'});
                    }
                }
            }

            //模式下拉框
            var modelLi='';
            for(var i=0;i<modelArry.length;i++){
                modelLi += '<li name="mode" m_value='+ modelArry[i].value +'>' + modelArry[i].key+ '</li>'
            }
            $('.modelSub ul').append(modelLi);

            //命令类型下拉框
            var commondLi ='';
            for(var i=0; i<commondArry.length; i++){
                commondLi += '<li name="command_type" m_value='+ commondArry[i].value +'>' + commondArry[i].key+ '</li>';
            }
            $('.commondSub ul').append(commondLi);

            //=========自定义下拉菜单==============
            $('.selectInput').click(function(){
                var $this = $(this);
                $this.next('.selectSub').toggle();
            });
            $('.selectSub li').click(function(){
                var $this = $(this);
                $this.parent().parent().siblings().html($this.text());
                $this.parent().parent().hide();
                $this.addClass('active').siblings().removeClass('active');

                if($this.attr('id') == 'modelmoren'){
                    questParam.mode = '';
                }
                else if($this.attr('id') == 'commondmoren'){
                    questParam.command_type = '';
                }
                else{
                 questParam[$this.attr('name')] = $this.attr('m_value');
                }
            });

            //点击底部分页器
            $('#pagination').click(function(){
                questParam.pageNow = parseInt($('.laypage_main span').text());

                questParam.start_date = $startTime.val();
                questParam.end_date = $endTime.val();
                $page_now.text(questParam.pageNow);//操作栏当前页数值显示

                $.post('http://120.77.83.63:8180/baod/device/operate.shtml',{token:token,id:'606'},function(data){
                    if(data.code == '1'){
                        if(data.data.length<0){
                            $('.del-btn').remove();
                        }
                    }
                },'json');
                console.log(questParam);
                $.post('http://120.77.83.63:8180/baod/commandLog/findByPage.shtml',questParam,function(data){
                    console.log(data);
                    if(data.code == '1'){
                        data = data;
                        records = data.data.records;

                        pageInfo(data);//调用页面信息函数
                        addtabelRow(records);//调用交互记录表格函数
                        chooseAll();//调用全选函数
                        intertbody_td();//调用交互内容高度设定函数
                    }else{
                        alert(data.msg);
                    }

                },'json')
            });

            //点击搜索按钮时
            $('.seachBtn').click(function(){
                findByPage();
            });
            //点击删除按钮
            $delBtn.click(function(){

                if($('input[name="chooseRow"]:checked').length <= 0){//没有勾选
                    $tipbomb.text('请选择要删除的交互记录');
                    $tipbomb.animate({'opacity':'1'},2000,function(){
                        $tipbomb.css({'opacity':'0'})
                    })//2s后提示框消失

                }else {
                    //点击删除按钮，删除弹框显示
                    $delBtn.addClass('active');
                    $bombBoxs.css({'display':'block'});
                    $delbomb.css({'display':'block'});

                    $('.tips-button').click(function(){
                        closeDelBomb();//关闭弹框

                        var chooseRowCheck = $('input[name="chooseRow"]:checked');
                        var recordsIds = '';//记录的ID

                        //点击确认后，提示成功框出现，1s后消失，再删掉后台和显示页面上选中的li数据
                        $tipbomb.text('操作成功');
                        $tipbomb.animate({'opacity':'1'},1000,function(){
                            for(var i=0;i<chooseRowCheck.length;i++){
                                recordsIds = recordsIds + ',' + $(chooseRowCheck[i]).parent().parent().attr('id');
                            }

                            var record_Ids = recordsIds.slice(1);
                            console.log(record_Ids);

                            //删掉选中的li后台数据
                            $.post('http://120.77.83.63:8180/baod/commandLog/deleteEntity.shtml',{token:token,ids:record_Ids},function(data){
                                console.log(data);
                            },'json');

                            chooseRowCheck.parent().parent().remove();//页面上删除选中的li
                            $tipbomb.css({'opacity':'0'});
                            location.reload();//重新加载页面
                        })
                    })
                }
            });

            //关闭弹框
            $closeBtn.click(function () {
                closeDelBomb();
            });
            function closeDelBomb () {
                $delBtn.removeClass('active');
                $bombBoxs.css({'display':'none'});
                $delbomb.css({'display':'none'});
            }
        })
    </script>
</body>
</html>